<template>
    <div class="auction warp">
        <ul class="pai-item-list">
          <li v-for="o in 7" :key="o" class="pai-item">
              <div class="link_wrap">
                  
                  <img src="@/assets/img.jpg" class="image">
                  <div class="item_title">
                      好吃的汉堡好
                    </div>
                  <div class="item_content">
                    <div class="item_money">
                      <p>拍卖企业：河北一盟拍卖有限公司</p>
                      <div class="item_money_time">
                        <p>预计距离今日11:38结束</p>
                        <p class="start">即将开始</p>
                      </div>
                      
                    </div>  
                      <div class="item_bottom clearfix">
                        <el-button type="danger" class="button">拍卖大厅</el-button>
                      </div>
                  </div>
            </div>  
          </li>
      </ul>
    </div>
</template>
<script>
export default {
    data() {
      return {
        
      };
    },
    methods: {
        
    }
  }
</script>
<style lang="less" scoped>
.auction{
    .pai-item-list{
      display: flex;
      flex-wrap:wrap;
      justify-content: space-between;
      &::after{
        content: '';
        width: 588px;
      }
      .link_wrap{
        width: 588px;
        height: 400px;
        background-color: #fff;
        position: relative;
          .image {
            width: 588px;
            height: 200px;
            display: block;
            
          }
          .item_title{
            width: 100%;
              height: 40px;
              line-height: 40px;
              font-size: 16px;
              font-weight: bold;
              position: absolute;
              top: 160px;
              color: #fff;
              background-color: rgba(18, 18, 18, 0.66);
            }
          .item_content{
            padding-left: 12px;
            padding-right: 12px;
            padding-top: 8px;           
            .item_money{
              font-size: 14px;
              color: rgb(153, 153, 153);
              .item_money_time{
                p{
                  display: inline-block;  
                }
                
                p:last-of-type{
                  font-size: 12px;
                  font-weight: 400;
                  position: absolute;
                  right: 0px;
                  width: 70px;
                  height: 20px;
                  line-height: 20px;
                  text-align: center;
                  border-radius: 12px 0px 0px 12px;
                  background-color: #67C23A;
                  color: #fff;
                }
              }
            }
            .item_money{
              p{
                margin-bottom: 10px;
              }
            }
            .item_bottom{
              // margin-top: 13px;
              line-height: 12px;
              border-top: 1px solid rgb(237, 237, 237);
            }
          }
        .item_card:hover{
            border: 1px solid #cc0000;
          }

        
        
      }
    }
} 
</style>